<template>
  <div class="hello">
    <div class="tophed">
      <div class="log">
        <img src="../assets/TTSLOG.png" />
      </div>
      <div class="dianhua">
        <img src="../assets/dianhua.png" />
        <span>咨询我们：18317093686</span>
      </div>
    </div>
    <ul>
      <li
        v-for="suibianqi in ar"
        :key="suibianqi.id"
        @click="dianji(suibianqi.id);dian(suibianqi.lujing)"
        :class="id==suibianqi.id?'a':'b'"
      >{{suibianqi.names}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      id: 0,
      ar: [
        {
          names: "首页",
          id: 1,
          lujing: "/home"
        },
        {
          names: "网站开发",
          id: 2,
          lujing: "/wangzhan"
        },
        {
          names: "APP开发",
          id: 3,
          lujing: "/app"
        },
        {
          names: "小程序开发",
          id: 4,
          lujing: "/chengxu"
        },
        {
          names: "案例",
          id: 5,
          lujing: "/anli"
        },
        {
          names: "关于我们",
          id: 6,
          lujing: "/women"
        }
      ]
    };
  },
  methods: {
    dianji(bianse) {
      this.id = bianse;
      //  this.$router.push("/wangzhan");
      // this.$router.push("/home");
      // this.$router.push("/app");
    },
    dian(tiao) {
      this.$router.push(tiao);                                                 
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
  height: 50px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
li {
  margin: 1px;
  width: 200px;
  height: 60px;
  line-height: 60px;
  transform: skewX(-25deg);
}
.a {
  background-color: #42b983;
  color: #fff;
}
.b {
  background-color: #000;
  color: orange;
}
.tophed {
  display: flex;
  justify-content: space-between;
  width: 1400px;
  margin: 0 auto;
  height: 100px;
  line-height: 100px;
  margin-bottom: 1em;
  img {
    vertical-align: middle;
  }
  span {
    color: #415b76;
    margin-left: 1em;
  }
}
</style>
